<template>
	<view class="">
		<NewCards @noticeLoad='getNoticeData'></NewCards>
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<view class="userbox">
			<view class="userbox-head">
				<view class="touxiang " v-if="isScope" :style="{backgroundImage:'url(' + userInfo.headimgurl + ')'}">
				</view>
				<view class="touxiang " v-if="!isScope"
					:style="{backgroundImage:'url('+domain+'/static/img/user/user.png)'}" @click="getuserinfo"></view>
				<view class="user-tages">
					<view class="user-tags-one flexRow flex-wrap">
						<text class="username text-cut" v-if="isScope">{{userInfo.nickname || userInfo.user_name}}
						</text>
						<text class="username1 " v-if="!isScope">{{userInfo.mobile || '未登录'}} </text>
						<button class=" cu-btn sm round user-edit middle clickEffict" v-if="isScope"
							@click="jump('/pages/user/edit',1)">
							<image :src="domain+'/static/img/user/edit.png'" class="user-edit1-image" mode="aspectFit">
							</image>&nbsp; 编辑
						</button>

						<button class=" cu-btn sm  round user-edit1 margin-left-sm margin-top-xs"
							open-type="getUserInfo" @click="getuserinfo"
							v-if="wxInfo.nickname!=userInfo.nickname">
							<image :src="domain+'/static/img/user/tongbu.png'" class="user-edit1-image"
								mode="aspectFit">
							</image> 同步微信账号
						</button>

						<view class="tags-id middle user_id sm margin-left-sm margin-right-xs margin-top-xs"
							v-if="userInfo.user_id">
							id:{{userInfo.user_id || ''}}
							<view class="tag-mask"></view>
						</view>
					</view>
					<!-- <view class="user-tags-two flexRow">
						<view class="tags-id middle " v-if="userInfo.user_id">
							id:{{userInfo.user_id || ''}}
							<view class="tag-mask"></view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="userbox-mak">
				<view class="mask-blue bg-blue"></view>
				<image :src="userInfo.headimgurl" v-if="isScope" mode="aspectFill"></image>
			</view>
			<view class="userbox-bottom">
				<view class="user-item middle " v-for="(item,index) in userItem" :key="index" @tap="jump(item.path,1)">
					<image class="user-item-icon clickEffict" :src="item.url" mode="heightFix"></image>
					<text class="user-item-text text-whtie"> {{item.name}}</text>
				</view>
				
			</view>
		</view>

		<view class="usercard ">
			<view class="user-card-item" @click="jump('',3)">
				<image class="user-card-img" :src="domain+'/static/img/user/address.png'" mode="widthFix">
				</image>
				<text class="user-card-name">地址管理</text>
				<view class="user-card-right ">
					<text> <text class=" cuIcon-right"> </text></text>
				</view>
			</view>
			<!--<view class="user-card-item clickEffict" @click="jump('',0)">
				<image class="user-card-img" :src="domain+'/static/img/user/renzhen.png'" mode="widthFix"></image>
				<text class="user-card-name">学生认证</text>
				<view class="user-card-right">
					<text>未认证 <text class=" cuIcon-right"> </text></text>
				</view>
			</view> -->
			<view class="user-card-item" @click="openPhone">
				<image class="user-card-img" :src="domain+'/static/img/user/phone.png'" mode="widthFix"></image>
				<text class="user-card-name">绑定手机</text>
				<view class="user-card-right">
					<text class=" cuIcon-right"> </text></text>
				</view>
			</view>
			<view class="user-card-item" @click="jump('',4)">
				<image class="user-card-img" :src="domain+'/static/img/tabbar/notice_cur.png'" mode="widthFix"></image>
				<text class="user-card-name">我的消息</text>
				<view class="user-card-right">
					<view class="cu-tag badge" style="position: relative;top: 0;right:0 ;" v-if="NoticeNum>0">
						{{NoticeNum}}
					</view>
					<text class=" cuIcon-right"> </text>
				</view>
			</view>
			<view class="user-card-item" @click="call(userInfo.kfcontact)">
				<image class="user-card-img" :src="domain+'/static/img/user/kefu.png'" mode="widthFix"></image>
				<text class="user-card-name">人工客服</text>
				<view class="user-card-right ">
					<text>{{userInfo.kfcontact || ''}} <text class=" cuIcon-right"> </text></text>
				</view>
			</view>
			<view class="user-card-item" @click="jump('',-1)">
				<image class="user-card-img" :src="domain+'/static/img/user/login.png'" mode="widthFix"></image>
				<text class="user-card-name">退出登录</text>
				<view class="user-card-right">
					<text></text>
					<text class="user-card-arrow cuIcon-right"> </text>
				</view>
			</view>
		</view>
		<view class="userfoot">
			2021 YYPZ Data lnc.All rights reserved.
		</view>


		<uni-popup ref="phone" type="center">
			<view class="phone-box">
				<view><text class="bold text-bold">请先绑定您的手机号</text>
					<view class="cuIcon-close " style="position: absolute;float: right;right: 2%;top: 1%;"
						@click="close">
					</view>
				</view>
				<view class="phone-item">
					<input type="text" v-model="userphone" placeholder="输入手机号" />

				</view>
				<view class="phone-item">
					<input type="text" value="" placeholder="输入验证码" v-model="code" maxlength="4" />
					<text class="get-code loadStyle" @click="getCode" v-if="is_sending==0">获取验证码</text>
					<text class="get-code loadStyle" v-if="is_sending==1">{{times}}</text>
				</view>
				<view class="btn-sure" @click="bindPhone"><text>确定</text></view>


			</view>
		</uni-popup>

	</view>

</template>

<script>
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	export default {
		components: {
			uniPopup
		},
		name: "User",
		data() {
			return {
				domain: this.resDomain,
				isLoading: false,
				loadStatus: 'load',
				StatusBar: this.StatusBar,
				userInfo: {
					headimgurl: ""
				},
				userItem: [{
						name: "我的订单",
						url: this.resDomain + "/static/img/user/order.png",
						path: "/pages/user/myorder"

					}, {
						name: "优惠券",
						url: this.resDomain + "/static/img/user/youhuiquan.png",
						path: "/pages/user/couponList"

					},
					{
						name: "合作加盟",
						url: this.resDomain + "/static/img/user/hezuo.png",
						path: "/app/TakeOut/pages/user/apply?type=1"

					}
				],
				isScope: false,
				openMember: 0,
				code: '',
				mobile: '',
				StorageInfo: 0,
				is_sending: 0,
				times: 60,
				userphone: '',
				timer: null,
				NoticeNum: 0,
				wxInfo: {
					nickname: ''
				}
			}
		},

		onHide() {
			if (this.timer != null) {
				clearInterval(this.timer)
			}
		},
		onShow() {
			this.load();
			this.NoticeNum = uni.getStorageSync("noticeNum");

		},
		methods: {
			upDataLogin() {

			},
			getnickName() {

				uni.getStorage({
					key: "nickname",
					success: (r) => {
						this.wxInfo.nickname = r.data;
					},
					fail: () => {
						this.wxInfo.nickname = "";
					}
				})

			},
			/**
			 * 加载个人信息
			 */
			load() {
				let authorization = uni.getStorageSync('authorization');
				if (uni.getStorageSync('isscope') && authorization) {
					this.isScope = true;
				}
				//判断是否已经授权  是否未微信公众号的用户  是 是 实现自动登录    不是 授权再由用户点击授权
				uni.getSetting({
					success: (dat) => {
						(dat.authSetting['scope.userInfo'] && authorization) ? (() => {
							this.isScope = true;
							uni.setStorageSync('isscope', true)
						})() : "";
					}
				})
				if (authorization) {
					this.refresh();
				} else {
					this.isLoading = true;
				}
			},
			/**
			 * 绑定手机号
			 */
			openPhone() {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					this.refresh();
				} else {
					this.$refs.phone.open();
				}

			},
			/**
			 * 计时器
			 */
			setTime() {
				this.timer = setInterval(() => {
					if (this.times > 0) {
						this.times--
					} else {
						this.times = 60
						this.is_sending = 0
						clearInterval(this.timer);
					}
				}, 1000);
			},
			/**
			 * 获取验证码
			 */

			getCode() {
				if (this.userInfo.mobile == this.userphone) {
					uni.showToast({
						title: '手机号已绑定',
						icon: 'none'
					})
					return false;
				}
				if (!RegExp(/^1[3456789]\d{9}$/).test(this.userphone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
					return false;
				}

				this.apiRequest('/comm/getLoginCode', {
					mobile: this.userphone
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.is_sending = 1
					this.setTime()
				})
			},
			/**
			 * 关闭弹窗
			 */
			close() {
				this.$refs.phone.close();

			},


			/**
			 * 绑定手机号
			 * @param {Object} e
			 */
			bindPhone(e) {
				this.apiRequest('/buyer/bindMobile', {
					mobile: this.userphone,
					code: this.code
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						this.mobile = this.userphone;
						this.userInfo.mobile = this.userphone;
						this.userInfo.mobile_validated = 1;
						uni.setStorageSync('userInfo', this.userInfo);
						this.$refs.phone.close()
					}
				})
			},

			/**
			 * 获取用户信息
			 */

			refresh() {
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}, 0).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
						this.wxInfo.nickname = this.userInfo.nickname;
						this.getnickName();
						this.$forceUpdate();
						uni.setStorageSync('userInfo', res.data)
						this.mobile = this.userInfo.mobile;
						setTimeout(() => {
							this.isLoading = true;
						}, 100);
					}
				});
				this.StorageInfo = uni.getStorageInfoSync();
			},
			getuserinfo() {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					this.refresh();
					return false;
				}
				uni.getUserProfile({
					provider: "weixin",
					desc: "同步用户信息到一舟云校园",
					success: (r) => {
						uni.setStorageSync("nickname", r.userInfo.nickName);
						this.apiRequest('/buyer/yzUserTask', {
							user_info: r.userInfo
						}).then(res => {
							this.getnickName();
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							if (res.code == 200) {
								uni.setStorageSync('isscope', true)
								this.isScope = true;
								this.refresh();
							}
						});
					},
					fail: (e) => {
						console.log(e);
					}
				})
			},
			/**
			 * 打电话
			 * @param {Object} tel
			 */
			call(tel) {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					this.refresh();
				}
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			/**
			 * 跳转
			 */
			jump(...dat) {
				let path = dat[0],
					type = dat[1];
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					this.refresh();
					return;
				}
				switch (type) {
					case -1:
						uni.showModal({
							title: '温馨提示',
							content: '确定需要退出当前账号吗？',
							success: (e) => {
								if (e.confirm) {
									try {
										let area_id = uni.getStorageSync('area_id');
										uni.clearStorageSync();
										uni.setStorageSync('area_id', area_id);
										uni.setStorageSync("loginStatus", true);
										this.userInfo = {};
										this.isScope = false;
										uni.navigateTo({
											url: '/pages/user/login'
										});
									} catch (e) {
										// error
									}
									uni.showToast({
										title: '退出成功',
										icon: 'none'
									})

								}
							}
						})

						break;

					case 0: //未开放
						uni.showToast({
							icon: 'none',
							title: '此功能正在努力开发中...'
						});
						break;
					case 1: //跳转
						if (path == "") {
							uni.showToast({
								icon: 'none',
								title: '此功能正在努力开发中...'
							});
							return false;
						}

						uni.navigateTo({
							url: path,
							animationType: 'slide-in-right'
						})


						break;

					case 2: //弹窗
						break;


					case 3: //跳转地址管理
						uni.navigateTo({
							url: '/app/TakeOut/pages/user/addressList'
						});

						break;
					case 4: //跳转地址管理
						uni.navigateTo({
							url: '../basic/notice'
						});

						break;


				}

			}

		}





	}
</script>

<style scoped>
	.cuIcon-close {
		font-size: 45rpx;
	}

	.nick-box,
	.phone-box {
		width: 550rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		padding: 50rpx;
	}

	.nick-box input,
	.phone-box input {
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 25rpx;
		width: 550rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.nick-box .btn-sure,
	.phone-box .btn-sure {
		background: #1270e0;
		padding: 20rpx 0;
		text-align: center;
		color: #FFFFFF;
		border-radius: 20rpx;
	}



	button::after {
		border: none;
	}

	.userbox {
		width: 100vw;
		height: 600upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 		background-color: #2175E3; */
		position: relative;
		z-index: 1;

	}

	.userbox-mak {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.userbox-mak image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
		filter: blur(10upx);
	}

	.mask-blue {
		width: 100%;
		height: 100%;
		z-index: 2;
		top: 0;
		opacity: 0.65;
		position: absolute;
	}

	.userbox-head {
		width: 94%;
		height: 180upx;
		margin-top: 18%;
		display: flex;
		flex-direction: row;

	}

	.touxiang {
		width: calc(100vw*(120/750));
		height: calc(100vw*(120/750));
		margin-top: 15upx;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center;
		border: 4upx solid #FFFFFF;
		z-index: 1;
	}

	.user-tages {
		z-index: 1;
		margin-top: 30upx;
		margin-left: 3%;
		width: 70%;
		min-height: calc(100vw*(120/750));
		display: flex;
		flex-direction: column;
	}

	.user-edit {
		background-color: transparent;
		/* padding: 20upx; */
		height: calc(100vw*(40/750));
		border: 2upx solid #FFFFFF;
		margin-left: 2%;
		border-radius: 40upx;
		color: white;
	}

	.user-edit1 {

		font-size: 20upx;
		font-weight: 500;
		color: #333333;
		background: #FBDA30;
		padding: 20upx;

	}

	.user_id {
		font-size: 20upx;
		font-weight: 500;

		padding: 20upx;
	}

	.user-edit1-image {

		width: 30upx;
		padding-right: 8upx;
	}

	.cuIcon-refresh {
		font-size: 32upx;
		padding-right: 15upx;
	}

	.flexRow {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.user-tags-one {
		width: 100%;
		/* height: 50%; */

	}

	.user-tags-two {
		width: 100%;
		height: 50%;
	}

	.tags-id {
		max-width: 50%;
		min-width: 35%;
		overflow: hidden;
		text-overflow: ellipsis;

		color: white;
		border-radius: 40upx;
		position: relative;
	}

	.tag-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: -1;
		opacity: 0.1;
		background-color: #FFFFFF;
	}

	.tags-address {
		margin-left: 3%;
	}

	.username1 {
		max-width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32upx;
		color: white;
		font-weight: 600;
		/* display: flex; */
		align-items: center;
		padding-right: 10upx;
	}

	.username {
		max-width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 45upx;
		color: white;
		font-weight: 600;
		/* display: flex; */
		align-items: center;
		padding-right: 10upx;
	}

	.userbox-bottom {
		width: 94%;
		height: 35%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.user-item {
		width: 30%;
		height: 80%;
		flex-direction: column;
	}

	.user-item-icon {
		text-align: center;
		width: 20%;
		height: 40%;
	}

	.user-item-text {
		margin-top: 10%;
		width: 100%;
		font-size: calc(100vw*(28/750));
		text-align: center;
		color: white;
		font-weight: 500;
		z-index: 2;
	}

	/**
	 * 个人面板样式
	 */
	.usercard {
		width: 90%;
		margin: -10% auto;
		min-height: 300upx;
		border-radius: 20upx 20upx 0px 0px;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9;
		position: relative;
	}

	.user-card-item {
		width: 94%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.user-card-name {
		font-size: calc(100vw*(28/750));
		font-weight: 700;
		margin-left: 4%;
	}

	.user-card-img {
		width: calc(100vw*(30/750));
		height: auto;
	}

	.user-card-right {
		position: absolute;
		right: 0;
		float: right;
		color: #999999;
	}

	.user-card-arrow {
		padding-left: 50upx;
	}

	.userfoot {
		margin-top: calc(100vw*(120/750));
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #999999;
		font-size: calc(100vw*(24/750));
	}

	.kefu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		background-color: transparent;
		outline: none;
		padding: 0;
	}

	#record::after {

		border: none;

	}

	.phone-item {
		display: flex;
		white-space: nowrap;
	}

	.phone-item .get-code {
		background: #1270e0;
		border-radius: 5rpx;
		width: 45%;
		padding: 0 15rpx;
		margin-left: 2%;
		text-align: center;
		line-height: 70rpx;
		height: 70rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 20rpx;
	}

	.phone-box {
		position: relative;
	}

	.sm {
		height: 48rpx;
	}
</style>
